<template>
	<view id="tmpl">
		<view v-show="is_show_answer">
			<!-- <view class="datetime-container">
			<view class="datetime" >
				考试日期<text>{{time}}</text>
			</view>
			<view class="timelang">
				考试时长：<text>20</text>分钟
			</view>
		</view> -->
			<!-- <view class="backtime-container">
			<view class="backtime">
				<image src="../../static/image/icon/clock.png" mode="widthFix" />
				<text>00:19:50</text>
			</view>
			<view>
				<image src="../../static/image/icon/report.png" mode="widthFix" />
				<text>1/50</text>
			</view>
		</view> -->

			<view class="progress">
				<text class="progress-text">{{ progress + 10 }}%</text>
				<cwgProgress :progress="progress + 10" bottomBackground="#eaedf4" firstBackground="#509cfa"></cwgProgress>
			</view>

			<view class="content">
				<view class="question_type">
					<text v-show="question_type == 1">(单选题)</text>
					<text v-show="question_type == 2">(多选题)</text>
				</view>
				<view class="name">
					{{ current_question_index + 1 }}:{{ question.title }}
					<text class="score"></text>
				</view>
				<view class="select-list">
					<checkbox-group class="answer-list" name="answer" v-if="question_type == 1">
						<label class="answer-item" v-show="optionA" @click="answer = 'A'">
							<radio value="A" :checked="answer == 'A'" />
							<text>A.{{ optionA }}</text>
						</label>

						<label class="answer-item" v-show="optionB" @click="answer = 'B'">
							<radio value="B" :checked="answer == 'B'" />
							<text>B.{{ optionB }}</text>
						</label>

						<label class="answer-item" v-show="optionC" @click="answer = 'C'">
							<radio value="C" :checked="answer == 'C'" />
							<text>C.{{ optionC }}</text>
						</label>

						<label class="answer-item" v-show="optionD" @click="answer = 'D'">
							<radio value="D" :checked="answer == 'D'" />
							<text>D.{{ optionD }}</text>
						</label>

						<label class="answer-item" v-show="optionE" @click="answer = 'E'">
							<radio value="E" :checked="answer == 'E'" />
							<text>E.{{ optionE }}</text>
						</label>
					</checkbox-group>
					<checkbox-group class="answer-list" name="answer" v-if="question_type == 2">
						<label class="answer-item" v-show="optionA" @click="join_answer(current_question_index, 'A')">
							<checkbox :class="checkbox_a ? 'checked' : ''" value="A" :checked="checkbox_a" />
							<text>A.{{ optionA }}</text>
						</label>

						<label class="answer-item" v-show="optionB" @click="join_answer(current_question_index, 'B')">
							<checkbox :class="checkbox_b ? 'checked' : ''" value="B" :checked="checkbox_b" />
							<text>B.{{ optionB }}</text>
						</label>

						<label class="answer-item" v-show="optionC" @click="join_answer(current_question_index, 'C')">
							<checkbox :class="checkbox_c ? 'checked' : ''" value="C" :checked="checkbox_c" />
							<text>C.{{ optionC }}</text>
						</label>

						<label class="answer-item" v-show="optionD" @click="join_answer(current_question_index, 'D')">
							<checkbox :class="checkbox_d ? 'checked' : ''" value="D" :checked="checkbox_d" />
							<text>D.{{ optionD }}</text>
						</label>

						<label class="answer-item" v-show="optionE" @click="join_answer(current_question_index, 'E')">
							<checkbox :class="checkbox_e ? 'checked' : ''" value="E" :checked="checkbox_e" />
							<text>E.{{ optionE }}</text>
						</label>
					</checkbox-group>
				</view>
			</view>

			<view class="pages">
				<view class="button" v-if="current_question_index == 0"><text>无</text></view>
				<view class="button" v-if="current_question_index != 0"><text @click="prev_question()">上一题</text></view>
				<view class="button" v-if="current_question_index < list_questions.length - 1"><text @click="next_question()">下一题</text></view>
				<view class="button" v-if="current_question_index >= list_questions.length - 1"><text @click="submit_kaoshi" display="submit_display">提交</text></view>
			</view>
		</view>
		<view class="none_question" v-show="!is_show_answer"><text>您今天已经答过题</text></view>

		<neil-modal
			style=""
			:autoClose="false"
			:show="answer_show"
			@close="closeModal"
			:title="'得分:' + answer_score"
			:content="answer_content"
			@cancel="bindBtn('cancel')"
			@confirm="bindBtn('confirm')"
		></neil-modal>
	</view>
</template>

<script>
import cwgProgress from '@/components/cwg-progress/cwg-progress.vue';
import neilModal from '../../components/neil-modal/neil-modal.vue';

export default {
	components: {
		cwgProgress,
		neilModal
	},
	data() {
		return {
			answer_show: false,
			id: 0,
			progress: 0,
			question: {},
			answer: 0,
			examination: '',
			time: new Date().toISOString().slice(0, 10),
			list_questions: [],
			current_question_index: 0,
			optionA: '',
			optionB: '',
			optionC: '',
			optionD: '',
			optionE: '',
			question_type: 0,
			list_answer: [],
			answer: '',
			submit_display: false,
			user: {},
			answer_content: '',
			answer_score: '',
			is_show_answer: false,
			checkbox_a: false,
			checkbox_b: false,
			checkbox_c: false,
			checkbox_d: false,
			checkbox_e: false
		};
	},
	onLoad: async function(options) {
		let self = this;
		this.id = options.id;
	},
	onShow: function() {
		let self = this;
		let is_login = uni.getStorageSync('user_token') ? true : false;
		if (!is_login) {
			uni.navigateTo({
				url: '../profile/user_login'
			});
		}
		uni.showLoading({
			title: '加载中'
		});

		let user = uni.getStorageSync('user');
		this.$api.ks(user.userName).then(res => {
			console.log('ress', res);
			let data = res.data;
			if (data != '') {
				this.is_show_answer = true;
				this.examination = res.data;
				this.list_questions = res.data;
				self.question = self.list_questions[self.current_question_index];
				self.optionA = self.question.optionA;
				self.optionB = self.question.optionB;
				self.optionC = self.question.optionC;
				self.optionD = self.question.optionD;
				self.optionE = self.question.optionE;
				self.question_type = self.question.type;
				uni.hideLoading();
			} else {
				this.is_show_answer = false;
			}
		});
		console.log('questions', this.list_questions);
		this.user = uni.getStorageSync('user');
		this.list_answer = [];
		this.current_question_index = 0;

		this.$_if.Initialize(this);
		// setInterval(() => {
		// 	self.progress += 1
		// }, 1000)
	},
	methods: {
		has_value: function(index, _v) {
			let _this = this;
			let _answers = _this.list_answer[index];
			if (!_answers || !_answers['answer']) return false;
			let _arr_answers = _answers['answer'].split(',');
			return _arr_answers.indexOf(_v) != -1;
		},
		join_answer: function(index, _v) {
			let _this = this;
			_this.list_answer[index] = _this.list_answer[index]
				? _this.list_answer[index]
				: {
						userId: this.user.userName,
						ksId: this.question.id,
						answer: ''
				  };
			let _answer = _this.list_answer[index]['answer'];
			let _arr_answer = _answer.split(',');
			let _index = _arr_answer.indexOf(_v);
			if (_index == -1) {
				_arr_answer.push(_v);
			} else {
				_arr_answer.splice(_index, 1);
			}
			let _str_answer = _arr_answer.join(',');
			if (_str_answer.startsWith(',')) {
				_str_answer = _str_answer.substring(1, _str_answer.length);
			}
			_this.list_answer[index]['answer'] = _str_answer;
			console.log('a', _this.list_answer);
			_this.checkbox_a = _this.has_value(index, 'A');
			_this.checkbox_b = _this.has_value(index, 'B');
			_this.checkbox_c = _this.has_value(index, 'C');
			_this.checkbox_d = _this.has_value(index, 'D');
			_this.checkbox_e = _this.has_value(index, 'E');
		},
		prev_question: function() {
			let self = this;
			
			this.question = this.list_questions[this.current_question_index];
			self.optionA = self.question.optionA;
			self.optionB = self.question.optionB;
			self.optionC = self.question.optionC;
			self.optionD = self.question.optionD;
			self.optionE = self.question.optionE;
			self.question_type = self.question.type;
			let ksId = this.question.id;
			
			let _arr_answ = ['A','B','C','D','E'];
			let __answ = this.GetAnswer(ksId);
			if(__answ){
				let __answer = "";
				if(this.question.type == 1)
					__answer = this.answer;
				else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						if(this['checkbox_'+answ.toLowerCase()]){
							__answer += answ + ',';
						}
					}
					__answer = __answer.substring(0,__answer.length - 1);
				}
				__answ['answer'] = __answer;
			}else{
				let __answer = "";
				if(this.question_type == 1){
					__answer = this.answer;
				}else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						if(this['checkbox_'+answ.toLowerCase()]){
							__answer += answ + ',';
						}
					}
					__answer = __answer.substring(0,__answer.length - 1);
				}
				
				this.list_answer[this.current_question_index] = {
					userId: this.user.userName,
					ksId: ksId,
					answer: __answer
				}
			}
			console.log(this.list_answer);
			
			
			this.current_question_index -= 1;
			if (this.current_question_index < 0) {
				this.current_question_index = 0;
			}
			this.question = this.list_questions[this.current_question_index];
			self.optionA = self.question.optionA;
			self.optionB = self.question.optionB;
			self.optionC = self.question.optionC;
			self.optionD = self.question.optionD;
			self.optionE = self.question.optionE;
			self.question_type = self.question.type;
			ksId = this.question.id;
			__answ = this.GetAnswer(ksId);
			
			if(__answ){
				if(this.question.type == 1){
				this.answer = __answ['answer'];
				}else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						this['checkbox_'+answ.toLowerCase()] = this.has_value(this.current_question_index,answ)
					}
				}
			}else{
				if(this.question.type == 1){
					this.answer = "";
				}else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						this['checkbox_'+answ.toLowerCase()] = false
					}
				}
			}
			
			this.progress = (this.current_question_index / this.list_questions.length) * 100;
			if (this.current_question_index >= this.list_questions.length) {
				this.submit_display = true;
			}
		},
		next_question: function() {
			let self = this;
			
			this.question = this.list_questions[this.current_question_index];
			self.optionA = self.question.optionA;
			self.optionB = self.question.optionB;
			self.optionC = self.question.optionC;
			self.optionD = self.question.optionD;
			self.optionE = self.question.optionE;
			self.question_type = self.question.type;
			let ksId = this.question.id;
			
			let _arr_answ = ['A','B','C','D','E'];
			let __answ = this.GetAnswer(ksId);
			if(__answ){
				let __answer = "";
				if(this.question.type == 1)
					__answer = this.answer;
				else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						if(this['checkbox_'+answ.toLowerCase()]){
							__answer += answ + ',';
						}
					}
					__answer = __answer.substring(0,__answer.length - 1);
				}
				__answ['answer'] = __answer;
			}else{
				let __answer = "";
				if(this.question_type == 1){
					__answer = this.answer;
				}else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						if(this['checkbox_'+answ.toLowerCase()]){
							__answer += answ + ',';
						}
					}
					__answer = __answer.substring(0,__answer.length - 1);
				}
				
				this.list_answer[this.current_question_index] = {
					userId: this.user.userName,
					ksId: ksId,
					answer: __answer
				}
			}
			console.log(this.list_answer);
			
			
			this.current_question_index += 1;
			if (this.current_question_index > this.list_questions.length) {
				this.current_question_index = this.list_questions.length;
			}
			this.question = this.list_questions[this.current_question_index];
			self.optionA = self.question.optionA;
			self.optionB = self.question.optionB;
			self.optionC = self.question.optionC;
			self.optionD = self.question.optionD;
			self.optionE = self.question.optionE;
			self.question_type = self.question.type;
			ksId = this.question.id;
			__answ = this.GetAnswer(ksId);
			
			if(__answ){
				if(this.question.type == 1){
				this.answer = __answ['answer'];
				}else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						this['checkbox_'+answ.toLowerCase()] = this.has_value(this.current_question_index,answ)
					}
				}
			}else{
				if(this.question.type == 1){
					this.answer = "";
				}else{
					for(let answ_id in _arr_answ){
						let answ = _arr_answ[answ_id];
						this['checkbox_'+answ.toLowerCase()] = false
					}
				}
			}
			
			this.progress = (this.current_question_index / this.list_questions.length) * 100;
			if (this.current_question_index >= this.list_questions.length) {
				this.submit_display = true;
			}
		},
		reset_checkbox_value() {
			let _this = this;
			let _arr = ['A', 'B', 'C', 'D', 'E'];
			if (!_this.list_answer[this.current_question_index] || !_this.list_answer[this.current_question_index]['answer']) {
				_this.checkbox_a = false;
				_this.checkbox_b = false;
				_this.checkbox_c = false;
				_this.checkbox_d = false;
				_this.checkbox_e = false;
				return;
			}

			let _answers = _this.list_answer[this.current_question_index]['answer'].split(',');
			_this.checkbox_a = false;
			_this.checkbox_b = false;
			_this.checkbox_c = false;
			_this.checkbox_d = false;
			_this.checkbox_e = false;
			for (let id in _answers) {
				_this['checkbox_' + _answers[id].toLowerCase()] = _this.has_value(this.current_question_index, _answers[id]) ?? false;
			}
		},
		submit_kaoshi: function() {
			uni.showToast({
				title: '提交中',
				duration: 2000
			});
			let self = this;
			this.submit_display = false;
			this.question = this.list_questions[this.current_question_index];
			// console.log(this.current_question_index)
			self.optionA = self.question.optionA;
			self.optionB = self.question.optionB;
			self.optionC = self.question.optionC;
			self.optionD = self.question.optionD;
			self.optionE = self.question.optionE;
			self.question_type = self.question.type;
			let ksId = this.question.id;
			let data = {
				userId: this.user.userName,
				ksId: ksId,
				answer: this.answer
			};
			this.list_answer.push(data);
			if (this.list_answer.length <= 0) {
				uni.showToast({
					title: '您还未答题'
				});

				let question_answers = this.answer[question_id];

				if (question_answers.indexOf(answer_id)) question_answers.remove(answer_id);
				else question_answers.push(answer_id);
				// let str = answer;
				// let arr_str = answer.split(",");
				// if(arr_str.indexOf(answer_id) != -1){
				// 	arr_str.remove(answer_id);
				// };
				// let _str = "";
				// for(let str in arr_str){
				// 	_str += str + ",";
				// }
				// _str.lenght = _str.lenght - 1;
				return false;
			}

			console.log('list_answer', this.list_answer);
			this.$api.sumitKs(this.list_answer).then(res => {
				console.log('ks_answer', res);
				let code = res.statusCode;
				if (code == 200) {
					// uni.showToast({
					// 	title:'提交成功',
					// 	duration:2000
					// })
					this.list_answer = [];
					// uni.switchTab({
					// 	url: "../peixun/answer"
					// })
					this.submit_display = true;
					this.answer_show = true;
					this.answer_score = res.data.data.score;
					for (let i = 0; i < res.data.data.hkKss.length; i++) {
						let _answer = res.data.data.hkKss[i];
						this.answer_content +=
							i +
							1 +
							'.' +
							'题目:' +
							_answer.title +
							'\n' +
							'题目解析:' +
							_answer.analysis +
							'\n' +
							'答案为：' +
							_answer.answer +
							'\n' +
							'选项A' +
							_answer.optionA +
							'\n' +
							'选项B' +
							_answer.optionB +
							'\n' +
							'选项C' +
							_answer.optionC +
							'\n' +
							'选项D' +
							_answer.optionD +
							'\n' +
							'选项E' +
							_answer.optionE +
							'\n';
					}
				}
			});
		},
		GetAnswer(ksId) {
			if (this.list_answer.length > 0) {
				for (let i = 0; i < this.list_answer.length; i++) {
					if (this.list_answer[i].ksId == ksId) {
						return this.list_answer[i];
					}
				}
			}
			return false;
		},
		SetAnswer(ksId, answer) {
			this.answer = '';
			let _answer = this.GetAnswer(ksId);
			console.log('11111111111111', _answer);
			if (_answer) {
				_answer.answer = answer;
				this.answer = answer;
			} else {
				let data = {
					userId: this.user.userName,
					ksId: ksId,
					answer: answer
				};
				this.list_answer.push(data);
			}
		},
		ResetOption() {
			if (!this.list_answer[this.current_question_index] || !this.list_answer[this.current_question_index]['answer']) {
				this.answer = '';
			} else {
				this.answer = '';
				this.answer = this.list_answer[this.current_question_index]['answer'];
			}
		},
		bindBtn(str) {
			uni.switchTab({
				url: '../home/index'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.datetime-container {
	@extend .flex-between;
	background-color: #6ab5a1;
	height: $line-height-2;
	line-height: $line-height-2;
	padding: 0 20upx;
	color: $font-color-1;
	font-size: $uni-font-size-base;
}

.backtime-container {
	@extend .flex-between;
	background-color: #dcdcdc;
	height: $line-height-2;
	line-height: $line-height-2;
	color: #cd8581;
	padding: 0 20upx;
	font-size: $uni-font-size-base;

	image {
		float: left;
		margin-top: 13upx;
		margin-right: 10upx;
		width: 40upx;
		height: 40upx !important;
	}

	text {
		float: left;
		margin-top: 0;
	}
}

.progress {
	color: $font-color-1;
	position: relative;
	margin: 0 15upx;
	margin-top: 5upx;
	// width: 100%;

	.progress-text {
		position: absolute;
		margin-top: 4upx;
		margin-left: 10px;
		font-size: $uni-font-size-base;
	}
}

.content {
	padding: 20upx;
	font-size: $uni-font-size-base;

	.question_type {
		color: #6aa494;
	}

	.name {
		margin: 10upx 0;
		margin-bottom: 30upx;
		font-size: $uni-font-size-lg;
	}

	.select-list {
		.answer-list {
			.answer-item {
				display: block;
				margin-bottom: 20upx;
				font-size: $uni-font-size-base;
				text {
					margin-left: 20upx;
				}
			}
		}
	}
}

.pages {
	@extend .flex-between;
	padding: 0 100upx;

	.button {
		color: $font-color-1;
		font-size: $uni-font-size-base;
		background-color: #6ab5a1;
		height: $line-height-2;
		line-height: $line-height-2;
		padding: 0 10upx;
		text-align: center;
		width: 25vw;
		border-radius: 10upx;

		text {
			display: block;
		}
	}

	.none {
		background-color: #9ccec2;
	}
}

.none_question {
	width: 300px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	text-align: center;
}
</style>
